JavaScript Heaven - Sample Scripts

Sample Scripts - Cycling Banners

Script #2. A Simple Banner

View example now

While surfing the web, its all too common to see banners advertising all manner of things. Many of these, you may have noticed, are not static images, but cycle through multiple images. How do we do this ? Well, we do it like this :-


<SCRIPT LANGUAGE=JAVASCRIPT>

	var adImages = new Array("banner1.GIF","banner2.GIF","banner3.GIF")
		var this Ad = 0
		var imgCt = 3

This creates three variables. A variable called AdImages which holds an array containing the three images our banner will use, thisAd contains the number of the image 'on show' and imgCt holds the total number of images that the banner is to scroll through.

Now we need a function to scroll through the images in the array.



	function cycle()
	{
	   if (document.images)
	   {
		thisAd++
		if (thisAd=imgCt)
		{
	       	    thisAd=0
	        }

Now we tell the browser that the banner is called adBanner and that it can find the images to be cycled through in the array adImages. We also set the rate at which the images are to be changed by setting a pause (setTimeout) which we set to 3 seconds (3 * 1000).


	document.adBanner.src=adImages[thisAd]
	setTimeout("cycle()",3 * 1000)
	}
   }

Here we end the script in the HEAD section of the page. The next part of the script is a handler and is embedded within the <BODY> tag like this :-


	<BODY BGCOLOR=BLACK onload="cycle()">
	<IMG SRC="banner1.GIF" NAME="adBanner">

So, let's see this script in action :-
View Source

NEXT EXAMPLE >>